import React, {useState, useEffect, useMemo} from 'react';
import {Spin, Empty} from 'antd';
import {cloneDeep} from 'lodash';
import {usePersistFn} from 'ahooks';

import {overallTrendDetail} from '~/service/liveMonitor';
import TrendChart from '../common/trendChart';
import TrendChartDoubleY from '../common/trendChartDoubleY';
import CommonCard from '../common/CommonCard';
import {ClientList, chartMap} from '../config.js';

const formatPointToPercent = value => `${Number(value * 100)}%`;

const withApiChart = Element => props => {
    const {
        searchParams,
        title,
        setFormLoading = () => {},
        ...restProps
    } = props;
    const [lineUnit, setLineUnit] = useState({});
    const [loading, setLoading] = useState(false);

    const run = usePersistFn(
        (params, title) => {

            const {dashBoardId, unitId} = chartMap.get(title);
            const dashBoardList = [
                {
                    dashBoardId,
                    dashBoardName: dashBoardId
                }
            ];

            const resultParams = {
                dashBoardList,
                dimensionAndValues: params
            };

            setLoading(true);
            setFormLoading(true);
            overallTrendDetail(resultParams).then(res => {
                const {
                    data
                } = res;

                let lineUnit = {};

                if (data && data[dashBoardId] && data[dashBoardId][unitId]) {
                    lineUnit = data[dashBoardId][unitId];
                }

                setLineUnit(lineUnit);
                setLoading(false);
                setFormLoading(false);
            });
        }
    );

    useEffect(() => {
        if (searchParams.length > 0) {
            run(searchParams, title);
        }
    }, [searchParams, run, title]);


    return (
        <>
            {
                (Object.keys(lineUnit || {})?.length > 0 && lineUnit?.chart)
                    ? (
                        <Element
                            {...restProps}
                            chartData={lineUnit}
                            loading={loading}
                        />
                    )
                    : <Spin spinning={loading}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Spin>
            }
        </>
    );
};


const ChartsContainer = ({searchParams, setFormLoading}) => {

    const SingleChart = useMemo(() => withApiChart(TrendChart), []);
    const [liveRoomNumberTabsKey, setLiveRoomNumberTabsKey] = useState('在线直播间数');
    const [lagTabsKey, setLagTabsKey] = useState('卡顿人头率');
    const [chatTabsKey, setChatTabsKey] = useState('聊天说卡率');

    const liveRoomNumberTabs = {
        在线直播间数: useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="在线直播间数"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
        卡顿异常直播间数: useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="卡顿异常直播间数"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
    };

    const lagTabs = {
        '卡顿人头率': useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="卡顿人头率"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
        '时均卡顿时长(s/h)': useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="时均卡顿时长(s/h)"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
        '时均卡顿次数(次/h)': useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="时均卡顿次数(次/h)"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
    };

    const chatTabs = {
        聊天说卡率: useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="聊天说卡率"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
        聊天说卡人数: useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="聊天说卡人数"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
        聊天说卡次数: useMemo(() => (
            <SingleChart
                searchParams={searchParams}
                title="聊天说卡次数"
                yAxisLabel={{formatter: '{value}'}}
                dataZoom
                gridBottom={80}
                setFormLoading={setFormLoading}
            />
        ), [searchParams, setFormLoading]),
    };

    return (
        <>
            <CommonCard title="学生人数">
                <SingleChart
                    searchParams={searchParams}
                    title="总览学生人数"
                    yAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>
            <CommonCard
                tabList={[
                    {
                        key: '在线直播间数',
                        tab: '在线直播间数',
                    },
                    {
                        key: '卡顿异常直播间数',
                        tab: '卡顿异常直播间数',
                    },
                ]}
                activeTabKey={liveRoomNumberTabsKey}
                handleTabChange={setLiveRoomNumberTabsKey}
            >
                {liveRoomNumberTabs[liveRoomNumberTabsKey]}
            </CommonCard>
            <CommonCard
                tabList={[
                    {
                        key: '卡顿人头率',
                        tab: '卡顿人头率',
                    },
                    {
                        key: '时均卡顿时长(s/h)',
                        tab: '时均卡顿时长(s/h)',
                    },
                    {
                        key: '时均卡顿次数(次/h)',
                        tab: '时均卡顿次数(次/h)',
                    },
                ]}
                activeTabKey={lagTabsKey}
                handleTabChange={setLagTabsKey}
            >
                {lagTabs[lagTabsKey]}
            </CommonCard>

            <CommonCard
                tabList={[
                    {
                        key: '聊天说卡率',
                        tab: '聊天说卡率',
                    },
                    {
                        key: '聊天说卡人数',
                        tab: '聊天说卡人数',
                    },
                    {
                        key: '聊天说卡次数',
                        tab: '聊天说卡次数',
                    },
                ]}
                activeTabKey={chatTabsKey}
                handleTabChange={setChatTabsKey}
            >
                {chatTabs[chatTabsKey]}
            </CommonCard>
        </>
    );
};

export default ChartsContainer;
